<link rel="stylesheet" href="xtec-resource/css/public/main/main.css"/>
<script src="xtec-resource/js/main/main.js"></script>


<!--导航部分-->
     <div class="navDiv">
        <nav class="scrollspy-nav">
            <ul>
                <li><i class="am-icon-star" style="color:red;margin-right: 5px;"></i><span>标签:</span></li>
                <li data-to="one-model">实时产能</li>
                <li data-to="one-model">加工信息</li>
                <li data-to="two-model">实时稼动率</li>
                <li data-to="two-model">当班稼动率</li>
                <li data-to="two-model">过去15天</li>
                <li data-to="three-model">停机管理</li>
                <li data-to="three-model">报警管理</li>
                <li data-to="four-model">统计稼动率</li>
            </ul>
        </nav>
     </div>

<div class="model-content">
    <!--实时产能-->
    <div id="one-model" class="one-model row am-cf">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
           <div class="one-model-left">
            <div class="model-top">
                <ul>
                    <li id="outPuts" class="select" @click="outPut($event)">实时产能</li>
                    <li id="messages" @click="addMessage($event)">加工信息</li>
                    <li class="borderBottom"></li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="modelBottomOutput">
                <div class="doSearch">
                    <div class="doSearchOutout">
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="table-responsive ouputTable">
                    <table id="model-table" class="table table-striped">
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div id="model-chart">

            </div>

        </div>
        </div>
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
           <div class="one-model-right">
            <p><span class="am-icon-th-large" style="margin-right: 10px;"></span>该系统简略</p>
            <div class="simple-xmis">
                <span>车间可视化</span><span>产能管理</span><span>实时报警</span><span>单机详情</span><span>加工信息</span><span>报表生成</span><span>当班稼动率界面</span><span>实时稼动率界面</span><span>刀具管理</span><span>生产计划管理</span></div>
            <div class="praise">
                <div class="praise-content">
                    <div class="m-back"><span>24小时无人化生产</span></div>
                </div>
            </div>
        </div>
        </div>
        <div class="clear"></div>
    </div>
<!--end-->


<!--实时稼动率-->
<div id="two-model" class="two-model row  am-cf">
    <div class="am-u-md-12 am-u-sm-12 am-u-lg-6">
    <div class="two-model-left">
        <div id="twoModelOee"><span class="modelTwo-title"><span class="am-icon-th-large" style="margin-right: 10px;"></span>实时稼动率</span></div>
        <div id="sSquare" class="col-md-12"></div>
        <div id="sBar" class="col-md-12" >
            <table id="currentTable" class="currentOeeTable">
                <thead>
                <tr>
                    <th>总数</th>
                    <th>空闲</th>
                    <th>正常</th>
                    <th>报警</th>
                    <th>关机</th>
                    <th>其他</th>
                </tr>
                </thead>
            </table>
        </div>

    </div>
    </div>
    <div class="am-u-md-12 am-u-sm-12 am-u-lg-6">
    <div class="two-model-right">
        <div class="twoModelContent">
            <div class="model-top">
                <ul>
                    <li class="select" id="current-oee">当班稼动率</li>
                    <li id="pass-fifth">过去15天</li>
                    <li class="borderBottom"></li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="modelBottomCurrent">
                <div id="search-oee">
                    <div class="searchOeeFixed">
                        <span class="icon icon-search" id="searchMachOee"></span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="table-responsive table-oee">
                    <table id="tableCss" class="table table-striped">
                    </table>
                </div>
            </div>
            <div id="model-chart1">
            </div>
        </div>
    </div>
    </div>
    <div class="clear"></div>
</div>
<!--end-->

<!---停机报警--->
<div id="three-model"  class="three-model row  am-cf">
    <div class="am-u-md-12 am-u-sm-12 am-u-lg-6">
    <div class="three-model-left">
        <div id="stopControlTitle"><span class="stopTitle"><span class="am-icon-th-large" style="left:-5px;"></span>停机管理</span></div>
        <div id="controlStop">


        </div>
    </div>
    </div>
    <div class="am-u-md-12 am-u-sm-12 am-u-lg-6">
    <div class="three-model-right">
        <div class="threeModelContent">
            <div id="alarmControlTilte"><span class="stopTitle"><span class="am-icon-th-large" style="margin-right: 10px;"></span>报警管理</span></div>
            <div class="table-responsive alaramTable">
                <table id="controlAlarm" class="table table-striped">
                </table>
            </div>
        </div>
    </div>
    </div>
    <div class="clear"></div>
</div>
<!--end-->

<!--统计稼动率-->
<div id="four-model" class="four-model row  am-cf">
    <div class="am-u-md-12 am-u-sm-12 am-u-lg-12">
    <div class="modelFourContent">
        <div id="modelTitleFour">
            <span class="statisticsOee"><span class="am-icon-th-large" style="margin-right: 10px;"></span>统计稼动率</span>
        </div>
        <div class="four-search">
            <ul>
                <li class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                <span><input type="text" class="am-form-field" placeholder="开始日期" data-am-datepicker readonly required/></span>
             <span>--- </span>
              <span><input type="text" class="am-form-field" placeholder="结束日期" data-am-datepicker readonly required/></span>
                </li>
                <li class="am-u-sm-12 am-u-md-6 am-u-lg-2">
                    <span>时间单位:</span>
                    <span><select id="unit" data-am-selected="{btnSize: 'sm'}">
                        <option value="d">日</option>
                        <option value="w">周</option>
                        <option value="m">月</option>
                        <option value="y">年</option>
                    </select></span></li>
                <li class="am-u-sm-6 am-u-md-6 am-u-lg-2">
                    <span>查询方式:</span>
                    <span style="width:20px"><select id="shift" data-am-selected="{btnSize: 'sm'}">
                        <option value="1">按班</option>
                        <option value="2">合计</option>
                    </select></span>

                </li>
                <li class="am-u-sm-6 am-u-md-6 am-u-lg-2">
                    <span>班别:</span>
                    <span> <select id="shift_list" data-am-selected="{btnSize: 'sm'}">
                        <option value="">全部</option>
                        <option value="s1">早班</option>
                        <option value="s2">晚班</option>
                    </select></span>
                </li>
                <li class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                        <input type="text" class="am-form-field" placeholder="请输入机器名称">
                        <span class="am-input-group-btn" style="float: none">
                            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button" @click="searchUser"></button>
                       </span>
                    </div>
                </li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="table-responsive tableStatistics">
            <table id="table-statistics" class="table table-striped">
                <caption></caption>


            </table>
        </div>
        <table class="statisticsOee">

        </table>
    </div>
    </div>
</div>
</div>